﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">

                <el-form-item>
                    <el-date-picker
                            v-model="searchForm.date"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                    <el-button type="success" icon="el-icon-download" @click="export1">导出</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-table
                    :data="tableData"
                    border
                    height="calc(100vh - 200px)"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        width="80"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        width="150"
                        label="手机">
                </el-table-column>
                <el-table-column
                        prop="title"
                        width="180"
                        label="问题内容">
                </el-table-column>
                <el-table-column
                        prop="area"
                        width="180"
                        label="问题区域">
                </el-table-column>
                <el-table-column
                        prop="crtTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="图片/视频"
                        width="400">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.img" v-for="(item,i) in scope.row.img.split(',') "
                                  style="width: 100px; height: 100px"
                                  :src="`${BASE_ANNEX}/${item}?token=sqjx`"
                                  :preview-src-list="handleAnnex(item)"
                                  fit="fit">

                        </el-image>
                        <a v-if="scope.row.videourl" :href="handleVideoUrl(scope.row)" target="_blank">视频</a>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="crtTime"
                        label="备注"
                        width="180">
                    <template slot-scope="scope">
                        {{scope.row.comment2}}{{scope.row.comment?',':''}}
                        {{scope.row.comment}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="80">
                    <template slot-scope="scope">
                        {{scope.row.status==1?'已反馈':(scope.row.status==2?'已处理':'已结束')}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="短信提示"
                        width="80">
                    <template slot-scope="scope">
                        {{scope.row.noticeStatus=='Err'?'失败':(scope.row.noticeStatus=='OK'?'已发送':'未发送')}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button type="success" v-if="scope.row.status==1" size="mini" @click="take(scope.row, '2')">
                            处理
                        </el-button>
                        <el-button type="primary" v-if="scope.row.status==2" size="mini" @click="take(scope.row,'3')">
                            结束
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.rows"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    :total="page.total">
            </el-pagination>
        </el-card>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible">
        <el-form :model="form" label-width="80px">
            <el-form-item label="备注" v-if="form.status==3">
                <el-input v-model="form.comment" placeholder="请输入备注" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" v-if="form.status==2">
                <el-input v-model="form.comment2" placeholder="请输入备注" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveComment">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                BASE_ANNEX: BASE_ANNEX,
                addEditDialog: false,
                dialogVisible: false,
                searchForm: {
                    name: '',
                    materialname: '',
                    date: '',
                    delaydate: '0',
                },
                form: {
                    id: '',
                    status: '',
                    comment: '',
                    comment2: '',
                    phone: '',
                    name: '',
                },
                page: {
                    total: 0,
                    currentPage: 1,
                    rows: 10,
                },

                tableData: [],

            }
        },
        mounted: function () {
            that = this
            that.search();
        },
        methods: {
            handleVideoUrl(e) {
                var url ='http://172.20.16.136:8080/office'+ e.videourl.split("office")[1];
                console.log('url',url)
               return url;
            },
            take(row, e) {
                that.dialogVisible = true;
                that.form.id = row.id
                that.form.status = e;
                that.form.phone = row.phone;
                that.form.name = row.name;
            },
            saveComment() {
                let param = JSON.parse(JSON.stringify(that.form));
                if (that.form.status == 2) {
                    delete param.comment;
                } else if (that.form.status == 3) {
                    delete param.comment2;
                }
                $.post('/office/healthDanger/changeStatus', param, function (res) {
                    if (res.code == 200) {
                        that.dialogVisible = false;
                        that.form.comment2 = '';
                        that.form.comment = '';
                        that.search();
                    }
                })
            },
            handleAnnex(e) {
                var a = e.split(',').map(item => {
                    return that.BASE_ANNEX + item + '?token=' + getToken()
                })
                return a;
            },
            search: function () {
                var params = JSON.parse(JSON.stringify(this.searchForm));
                params.startDate = params.date[0];
                params.endDate = params.date[1];
                params.page = this.page.currentPage;
                params.rows = this.page.rows;
                $.get('/office/healthDanger/queryHealthDangerList', params, function (res) {
                    that.tableData = res.obj.rows
                    that.page.total = res.obj.total
                })
            },
            export1() {
                var params = JSON.parse(JSON.stringify(this.searchForm));
                params.startDate = params.date[0];
                params.endDate = params.date[1];
                if(!params.startDate||!params.endDate){
                    this.$message.warning('请输入日期')
                    return
                }
                window.location = BASE_URL + '/office/healthDanger/export?token=' + Cookies.get('token') +
                    '&startDate=' + params.startDate +
                    '&endDate=' + params.endDate;
            },
            handleSizeChange() {

            },
            handleCurrentChange(currentPage) {
                that.page.currentPage = currentPage;
                that.search()
            },

        },

    })
</script>
</body>
</html>
